<!doctype html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>4个图片轮换显示的横幅广告</title>
  </head>
  
  <body onload="show()">
    <img src="./static/carousel1.jpg" id="adv1" style="display:none;">
    <img src="./static/carousel2.jpg" id="adv2" style="display:none;">
    <img src="./static/carousel3.jpg" id="adv3" style="display:none;">
    <img src="./static/carousel4.jpg" id="adv4" style="display:none;">
  </body>
  
  <script>
    let nowIndex = 1;//显示的第一张图片
    let maxIndex = 4;//需要显示的图片
    
    function show() {
      if (nowIndex == (maxIndex + 1)) {
        nowIndex = 1;
      }
      
      let i = nowIndex - 1;
      if (i == 0) {
        i = 4;
      }
      document.getElementById('adv' + i).style.display = 'none';
      document.getElementById('adv' + nowIndex).style.display = 'block';
      nowIndex++;//显示下一张图片
    }
    
    setInterval('show()', 1000);
    
    /*window.onload = function(){
      show();
    }*/
    window.onload = show;
  </script>
</html>